import { Spin } from 'antd';
import * as React from 'react';
import { observer, inject } from 'mobx-react';
import TopTools from './TopTools';
import Workbook from './Workbook';
import { WeaDialog } from "ecCom";
import QuickTableDrawer from './QuickTableDrawer';
import { loadSpread, releaseSpread } from '../../../utils/loadSpread';
import TemplateBrowser from '../../dialog/templateBrowser';
import DataSourceDialog from '../../dialog/data-source-dialog';
import AceEditorDialog from '../../dialog/custom-formula-dialog';
import CodeEditorDialog from '../../dialog/custom-code-dialog';
import FieldProps from './field-props';
import FieldAssignDialog from '../../dialog/FieldAssignDialog'

import './index.less';
@inject('edcExcelDesignerStore')
@observer
export default class EdcExcel extends React.Component {
    componentWillMount() {
        const { edcExcelDesignerStore: store, params, readonly } = this.props;
        store.appid = params.appid;
        this.t = loadSpread(store.loadWorkbook.bind(store, readonly));
    }
    componentWillUnmount() {
        releaseSpread(this.t);
    }
    render() {
        const { edcExcelDesignerStore: store } = this.props;
        return (
            <Spin spinning={!store.isInit || store.loading} size="large" wrapperClassName="wea-edc-excel-spin">
                <div className="wea-edc-excel-wrapper">
                    {store.isInit &&
                        [<TopTools
                            importFile={store.importFile}
                            onChange={store.changeCellStyle}
                            {...store.activeCellStyle}
                            expandCell={store.expandCell}
                            save={store.saveExcelPage}
                            preview={store.preview}
                            newPage = {store.newPage}
                            onChangeCellType={store.changeCellType}
                            setFillInData={store.setFillInData}
                            setSelectFillIn={store.setSelectFillIn}
                            browserAutoFillin={store.browserAutoFillin}
                            addDetailTable={store.addDetailTable}
                            addNoDetailTable={store.addNoDetailTable}
                            clearContent={store.clearContent}
                            browserTemplate={store.templateBrowserStore.open}
                            signFields={store.autoSignFields}
                            disabledSignFields={store.disabledSignFields}
                            setCellTypeProps={store.setCellTypeProps}
                            readonly={store.readonly}
                            deleteTableDisabled={store.deleteTableDisabled}
                            clearFieldDisabled={store.clearFieldDisabled}
                            deleteTable={store.deleteTable}
                            setFieldTypeDisabled={store.setFieldTypeDisabled}
                            isAutoFillin={store.isAutoFillin}
                            isAutoFillinDisabled={store.isAutoFillinDisabled}
                            setAutoFillin={store.setAutoFillin}
                            dataSourceList={store.dataSourceList.slice()}
                            formulaList={store.aceEditorStore.formulaList}
                            fieldAssignList={store.fieldAssignList.slice()}
                            formulaVisible ={store.aceEditorStore.formulaVisible}
                            cusCodeVisible ={store.aceEditorStore.cusCodeVisible}
                            addDataSource={store.addDataSource}
                            openDataSource={store.openDataSource}
                            deleteDataSource={store.deleteDataSource}
                            addFieldAssign={store.addFieldAssign}
                            openFieldAssign={store.openFieldAssign}
                            deleteFieldAssign={store.deleteFieldAssign}
                            dsMenuVisible={store.dataSourceStore.dsMenuVisible}
                            dsShowMenu={store.dataSourceStore.dsShowMenu}
                            faMenuVisible={store.fieldAssignStore.faMenuVisible}
                            faShowMenu={store.fieldAssignStore.faShowMenu}
                            openAceEditor={store.aceEditorStore.openAceEditor}
                            openCodeEditor={store.codeEditorStore.openCodeEditor}
                            showContent={store.aceEditorStore.showContent}
                            deleteFormula={store.aceEditorStore.deleteFormula}
                        />,
                        <div style={{ height: 'calc(100% - 100px)', position:'relative' }}>
                            <Workbook store={store} />
                            {store.isInit && !store.loading && store.fieldProps && <FieldProps store={store}></FieldProps>}
                        </div>,
                        <QuickTableDrawer store={store} />
                        ]
                    }
                </div>
                <TemplateBrowser store={store.templateBrowserStore} onChange={store.loadTemplate} exportExcel={store.exportExcel}></TemplateBrowser>
                <DataSourceDialog store={store.dataSourceStore}></DataSourceDialog>
                <FieldAssignDialog store={store.fieldAssignStore}></FieldAssignDialog>
                <AceEditorDialog store={store.aceEditorStore}></AceEditorDialog>
                <CodeEditorDialog store={store.codeEditorStore}></CodeEditorDialog>
            </Spin>
        )
    }
}